﻿@charset "utf-8";
/*!
* Date:2014-3-7
* Author:Elten
* ------------------------------
* Weibo:http://weibo.com/elten
* Email:letmo@163.com
* ------------------------------
* Operation record at the bottom
*/

html {height:100%; overflow-x:hidden}
body {font-smoothing: antialiased; font:12px/1.5 "Microsoft Yahei"; background:#ffffff; color:#7F8C8D}
.wrap {width:980px; margin:0 auto;}
a {color:#1abc9c; text-decoration:none}
a:hover {color:#16a085; text-decoration:none}
a, .curtains .case-list img {transition: all .2s linear 0s; -webkit-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; /*transition time*/ }
/**/
.curtains {width:100%; z-index:1; position:relative}
.curtains li {box-shadow: 0 0 12px #666666; position:fixed; width:100%; min-height:100%; top:0; left:0; overflow:hidden; z-index:1; transform:translateZ(0);}
.curtains li.hidden {display:none}
.curtains li:first-child {z-index:2}
.curtains li:last-child {box-shadow:none}
.curtains #section-1 {background:#ffffff url('../images/b1.jpg') no-repeat 50% 0; background-size:cover;}
.curtains #section-1 .head {color:#ffffff; font-size:50px; position:absolute; top:10%; left:50%; margin:0 0 0 -490px}
.curtains #section-1 .head .down-arrow {display:block; width:51px; margin:0 auto; overflow:hidden; font-size:80px; font-family:"microsoft yahei"; color:#ffffff; text-shadow:0 1px 0 #666666}
.curtains .main {color:#7F8C8D; position:absolute; top:5%; left:50%; margin:0 0 0 -490px}
.curtains .main .tit {height:60px; line-height:30px; width:980px; margin:0 auto; text-align:center; position:relative; margin-bottom:60px}
.curtains .main .tit .bottom-line {position:absolute; left:50%; width:88px; margin:0 0 0 -44px; bottom:6px; height:3px; border-radius:3px; background:#1abc9c; display:block;}
.curtains .main .tit h2 { font:30px/50px "microsoft yahei"; color:#1abc9c; text-align:center; border-bottom:1px solid #bdc3c7; display:inline; padding-bottom:7px }
.curtains h3 { font:20px/35px "Microsoft yahei"; margin-bottom:20px; color:#2C3E50}
.curtains #section-2 { background-color:#ffffff}
.curtains #section-3 { background-color:#ecf0f1}
.curtains #section-4 { background-color:#ffffff}
.curtains #section-5 { background-color:#ecf0f1}

.curtains .ser-list { padding:30px 10px;}
.curtains .ser-list:after {clear: both;content: ".";display: block; height: 0;visibility: hidden;}
.curtains .ser-list .icon { float:left; width:50px; height:50px; font-size:50px; line-height:50px; text-align:center; background-color:#1abc9c; color:#ffffff; padding:10px; margin-right:15px;}
.curtains .ser-list h3 { font:20px/25px "Microsoft yahei"; color:#1abc9c; margin-bottom:5px}
.curtains .ser-list p { font:14px/24px "Microsoft yahei"; color:#7F8C8D}

.curtains .case-list { width:225px; height:205px; margin:10px; float:left; position:relative; overflow:hidden}
.curtains .case-list img { width:235px; height:205px; position:absolute; top:0; left:0; z-index:9}
.curtains .case-list h3 {position:absolute; bottom:0; left:0; height:35px; margin-bottom:10px; z-index:10}
.curtains .case-list h3 a { color:#ffffff; display:block;width:205px; padding:0 10px;background:rgba(26,188,156,.6); font:14px/35px "microsoft yahei"; overflow:hidden}
.curtains .case-list:hover img { opacity:.9; left:-10px}

.curtains .advantage { padding:0 50px 20px;}
.curtains .advantage p { font:14px/22px "microsoft yahei"; color:#7F8C8D; margin-bottom:7px}
.matrix div {width:163.33px; float:left; height:163.33px; overflow:hidden; position:relative; z-index:10}
.matrix div.back { position:absolute; left:0; top:0;  z-index:9}
.matrix div a {display:block; height:123.33px; background-color:#1abc9c; color:#ffffff; text-align:center; padding:20px}
.matrix div a:hover {background-color:#16a085}
.matrix div a span {display:block; text-align:center; font:16px/25px "microsoft yahei";}
.matrix div a span.sub-name {font-size:12px; font-family:'tahoma','arial';}
.matrix .logo {position:absolute; top:0; left:0; height:163.33px; width:490px}
.matrix .logo h1 {color:#ffffff; font:bold 60px/70px "Impact"; letter-spacing:0.05em; text-shadow:0 1px 3px #666666}
.matrix .logo h1 span {color:#1abc9c;}
.matrix .logo h2 {color:#ffffff; font:16px/22px "tahoma"; letter-spacing:0.05em; text-shadow:0 1px 3px #666666}
/*contact*/
.page_title { height:30px; line-height:30px; margin-bottom:10px;}
.page_title h2 { font:normal 18px/30px "Microsoft Yahei"; color:#2C3E50;}
.contact_info p{ height:35px; font:normal 14px/35px "microsoft yahei"; border-top:1px solid #DDE4E6;}
.contact_info p span { color:#7F8C8D;}
.contact_info p:last-child { border-bottom:1px solid #EFEFEF;}
.message .input {width:220px; float:left; margin-bottom:7px;}
.message .input label { display:block; clear:both; font:normal 14px/30px "microsoft yahei";}
.message .input label span { margin:0 2px; font-size:14px; color:#DD4B39;}
.message .input .text { height:30px; font:normal 14px/30px "microsoft yahei"; width:198px; border:1px solid #EFEFEF; background:#F8F8F8; padding:0 10px; color:#34495E;}
.message .input .text:focus, .message textarea:focus { background:#FFFFFF; border-color:#DFDFDF;}
.message textarea { height:100px; padding:10px; width:698px; border:1px solid #EFEFEF; background:#F8F8F8; color:#34495E; font:normal 14px/24px "microsoft yahei";}
.btn { background: #1abc9c; color: #FFFFFF; display: inline-block; font: 16px/35px "Microsoft Yahei"; height: 35px; padding: 0 20px; }
.btn:hover { text-decoration:none; background-color:#16a085; color:#ffffff}
/*load bar*/
.load-bar { display:block; height:14px; width:350px; background-color:#ecf0f1; position:relative; border-radius:10px; overflow:hidden}
.load-bar .hover-bar { display:block; height:14px; background-color:#1abc9c; position:absolute; left:0; top:0; }
/*load bar animation*/
.curtains .current .load-bar .hover-bar.c1 {animation:1.5s ease-in-out 0s normal forwards 1 c1; }
.curtains .current .load-bar .hover-bar.c2 {animation:1.5s ease-in-out 0s normal forwards 1 c2; }
.curtains .current .load-bar .hover-bar.c3 {animation:1.5s ease-in-out 0s normal forwards 1 c3; }
.curtains .current .load-bar .hover-bar.c4 {animation:1.5s ease-in-out 0s normal forwards 1 c4; }
.curtains .current .load-bar .hover-bar.c5 {animation:1.5s ease-in-out 0s normal forwards 1 c5; }
.curtains .current .load-bar .hover-bar.c6 {animation:1.5s ease-in-out 0s normal forwards 1 c6; }
@keyframes c1{  0%{ width:0;} 100% { width: 50%; } }
@keyframes c2{  0%{ width:0;} 100% { width: 80%; } }
@keyframes c3{  0%{ width:0;} 100% { width: 70%; } }
@keyframes c4{  0%{ width:0;} 100% { width: 85%; } }
@keyframes c5{  0%{ width:0;} 100% { width: 80%; } }
@keyframes c6{  0%{ width:0;} 100% { width: 75%; } }

/*bgstretcher*/
.bgstretcher-area { text-align: left; }
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI { position: absolute; top: 0; left: 0;}
.bgstretcher UL, .bgstretcher UL LI {margin: 0; padding: 0; list-style: none;}
.bgstretcher { background: black; overflow: hidden; width: 100%; position: fixed; z-index: 1; _position: absolute; /*IE6 doesn't support fixed positioning*/ top: 0; left: 0;}

/**/